<template>
	<view class="record-page">
		<TopBar
			left-icon="/static/user.png"
			scan-icon="/static/saoyisao.png"
			menu-icon="/static/menu.png"
			@menu="toggleMenu"
		/>

        <scroll-view scroll-y class="form-scroll">
			<!-- 返回箭头 -->
			<view class="back-row" @click="goBack">
				<image class="back-arrow-icon" src="/static/left.png" mode="aspectFit" />
			</view>

			<!-- 搜索框 -->
			<view class="search-box">
                <image src="/static/search.png" class="search-icon" />
                <input class="search-input" placeholder="Value" />
			</view>

			<!-- 选项卡 -->
			<view class="tabs">
				<view class="tab" :class="{ active: active==='date' }" @click="active='date'">DATE</view>
				<view class="tab" :class="{ active: active==='country' }" @click="active='country'">COUNTRY</view>
				<view class="tab" :class="{ active: active==='name' }" @click="active='name'">NAME</view>
				<view class="tab" :class="{ active: active==='score' }" @click="active='score'">SCORE</view>
			</view>

            <!-- 列表（仅DATE下显示） -->
            <view v-if="active==='date'">
            <view class="card" v-for="(item, idx) in records" :key="idx">
                <image :src="item.img" class="card-img" mode="aspectFit" />
                <view class="card-body">
                    <text class="card-title">{{ item.title }}</text>
                    <text class="card-sub">{{ item.country }}</text>
                    <view class="card-row">
                        <view class="status" @click.stop="openDetail">Open</view>
                        <text class="date">{{ item.date }}</text>
                    </view>
                </view>
                <view class="badge" :class="item.badgeClass">{{ item.badge }}</view>
            </view>
            </view>
		</scroll-view>

		<AccountMenu
			v-if="showMenu"
			:style="{ '--anchor-top': '70px', '--anchor-right': '16px' }"
			@close="closeMenu"
			@select="closeMenu"
		/>

		<CustomTabbar active="record" />
	</view>
</template>

<script setup>
import { ref } from 'vue';
import TopBar from '@/components/TopBar.vue';
import AccountMenu from '@/components/AccountMenu.vue';
import CustomTabbar from '@/components/CustomTabbar.vue';

const showMenu = ref(false);
const active = ref('date');
const records = ref([
    { img: '/static/record/Img1.png', title: 'Vaglette', country: 'France', date: '23/09/2025', badge: 'B', badgeClass: 'b' },
    { img: '/static/p1.png', title: 'The one', country: 'USA', date: '24/08/2025', badge: 'B', badgeClass: 'b' },
    { img: '/static/p2.png', title: 'F.L', country: 'ITALY', date: '24/08/2025', badge: 'B', badgeClass: 'b' },
    { img: '/static/p3.png', title: 'AMCP', country: '', date: '24/07/2025', badge: 'C', badgeClass: 'c' }
]);

const openDetail = () => {
    uni.navigateTo({ url: '/pages/record/record-detail' });
};

const toggleMenu = () => {
	showMenu.value = !showMenu.value;
};

const closeMenu = () => {
	showMenu.value = false;
};

const goBack = () => {
	uni.navigateTo({ url: '/pages/home/order-production-detail' });
};

const handleMenuAction = (action) => {
	closeMenu();
	switch (action) {
		case 'profile':
			uni.showToast({ title: 'Personal data function under development', icon: 'none' });
			break;
		case 'settings':
			uni.showToast({ title: 'Setting function under development', icon: 'none' });
			break;
		case 'logout':
			uni.navigateTo({ url: '/pages/login/login' });
			break;
	}
};
</script>

<style lang="scss">
.record-page { min-height: 100vh; background: linear-gradient(180deg, #d9f0ff 0%, #e9f9ed 100%); }
.form-scroll { margin-top: 60px; padding: 0 16px 84px 16px; box-sizing: border-box; }
.back-row { margin: 12px 0 0 -8px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
.back-arrow-icon { width: 24px; height: 24px; }
.search-box { height: 44px; background: #fff; border-radius: 24px; display: flex; align-items: center; padding: 0 12px; box-shadow: 0 2px 8px rgba(0,0,0,.08); justify-content: center; margin-top: 16px; }
.search-icon { width: 16px; height: 16px; margin-right: 6px; }
.search-input { flex: 1; text-align: left; font-size: 14px; color: #333; }

.tabs { display: flex; gap: 8px; margin: 45px 0 0; }
.tab { padding: 6px 10px; background: #e6f0f5; color: #23323a; border-radius: 8px; font-weight: 800; font-size: 12px; }
.tab.active { background: #23323a; color: #fff; }

.card { position: relative; display: flex; background: #fff; border-radius: 12px; padding: 12px; box-shadow: 0 4px 12px rgba(0,0,0,.12); align-items: center; }
.card + .card { margin-top: 12px; }
.card-img { width: 100px; height: 100px; border-radius: 8px; margin-right: 12px; background: #eee; }
.card-body { flex: 1; }
.card-title { font-size: 18px; font-weight: 800; color: #0b1e2a; }
.card-sub { display: block; margin-top: 6px; color: #3b5560; font-size: 12px; }
.card-row { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.status { padding: 6px 10px; background: #e7f1ff; border-radius: 8px; color: #23323a; }
.date { color: #0b1e2a; font-size: 12px; }
.badge { position: absolute; right: 12px; top: 12px; width: 28px; height: 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; }
.badge.b { background: #7fbf5f; }
.badge.c { background: #ffcc33; color: #000; }
</style>
